<template>
	<div>

		<a-card :borderd="false" class="mb-2">
			<a-space>
				<a-button @click="tableRef.refresh()">
					搜索
				</a-button>
				<a-button @click="handleCreate" type="primary">新增</a-button>
			</a-space>
		</a-card>


		<a-card>
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>

		</a-card>

		<a-modal v-model:open="config.dialogFormVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogFormVisible = false" @ok="createData">
			<a-form :rules="config.rules" ref="dataForm" :model="config.temp">
				<a-form-item label="分组名称" name="name">
					<a-input v-model:value="config.temp.name"></a-input>
				</a-form-item>

				<a-form-item label="组类型" name="possessorType">
					<a-select v-model:value="config.temp.possessorType"
							  placeholder="请选择"
							  :disabled="config.dialogStatus == 'update'">
						<a-select-option v-for="item in config.possessorTypeList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>


				<a-form-item v-show="config.temp.possessorType == 1" label="用户名" name="possessorId">
					<a-select v-model:value="config.temp.possessorId" placeholder="请选择"
							  :disabled="config.dialogStatus == 'update'">
						<a-select-option v-for="item in config.userList" :key="item.id" :value="item.id">{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>

				<a-form-item v-show="config.temp.possessorType == 2" label="license" name="possessorId">
					<a-select v-model:value="config.temp.possessorId" placeholder="请选择"
							  :disabled="config.dialogStatus == 'update'">
						<a-select-option v-for="item in config.licenseList" :key="item.id" :value="item.id">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>

		</a-modal>


		<a-modal v-model:open="config.dialogPvVisible" :destroyOnClose="true" :width="1000" :closable="false"
				 @cancel="config.dialogPvVisible = false" @ok="config.dialogPvVisible = false">
			<el-table :data="config.pvData" border fit highlight-current-row style="width: 100%">
				<el-table-column prop="key" label="Channel"></el-table-column>
				<el-table-column prop="pv" label="Pv"></el-table-column>
			</el-table>
		</a-modal>
	</div>
</template>

<script setup>
import portGroupApi from '@/api/portGroup/portGroupApi.js'
import userApi from '@/api/sys/userApi'
import licenseApi from '@/api/license/licenseApi.js'

const tableRef = ref();
const dataForm = ref();
const config = ref({
	tableKey: 0,
	list: null,
	total: null,
	listLoading: true,
	listQuery: {
		importance: undefined,
		title: undefined,
		type: undefined
	},
	importanceOptions: [1, 2, 3],
	showReviewer: false,
	userList: [],
	licenseList: [],
	possessorTypeList: [
		{
			'id': 1,
			'name': '用户'
		},
		{
			'id': 2,
			'name': '通道'
		}
	],
	temp: {
		name: '',
		possessorType: 1,
		possessorId: 1

	},
	dialogFormVisible: false,
	dialogStatus: '',
	textMap: {
		update: '编辑',
		create: '新建'
	},
	dialogPvVisible: false,
	pvData: [],
	rules: {
		port: [{required: true, message: '端口必填', trigger: 'blur'}]
	},
	downloadLoading: false
})

const columns = ref([
	{
		title: 'id',
		key: 'id',
		dataIndex: 'id',
		ellipsis: true,
	},
	{
		title: '分组名称',
		key: 'name',
		dataIndex: 'name',
		ellipsis: true,
	},
	{
		title: '分组所属',
		key: 'possessorType',
		dataIndex: 'possessorType',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '用户'
			},
			{
				key: '2',
				value: 'License'
			},
			{
				key: '0',
				value: '全局'
			}
		]
	},
	{
		title: '创建时间',
		key: 'createTime',
		dataIndex: 'createTime',
		ellipsis: true,
	},
	{
		title: '修改时间',
		key: 'updateTime',
		dataIndex: 'updateTime',
		ellipsis: true,
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 260,
		fixed: 'right',
		buttonList: [
			{
				type: 'primary',
				click: (field, record) => {
					handleDelete(record)
				},
				render: (record) => {
					return "删除";
				}
			}
		]
	}
])

onMounted(() => {
	getList()
	getUserList()
	getLicenseList()
})
const getList = async () => {
	let response = await portGroupApi.fetchList(config.value.listQuery);
	return response;
}
const getUserList = async () => {
	let response = await userApi.userSelector();
	config.value.userList = response.records
}
const getLicenseList = async () => {
	let response = await licenseApi.licenseList();
	config.value.licenseList = response
}
const handleModifyStatus = async (row, enable) => {
	await portGroupApi.updateEnableStatus(row.id, enable);
	tableRef.value.refresh()
}
const resetTemp = () => {
	config.value.temp = {
		id: undefined,
		importance: 1,
		remark: '',
		timestamp: new Date(),
		title: '',
		status: 'published',
		type: ''
	}
}
const handleCreate = () => {
	resetTemp()
	config.value.dialogStatus = 'create'
	config.value.dialogFormVisible = true
	dataForm.value.clearValidate()
}
const createData = async () => {
	let valid = dataForm.value.validate();
	if (valid) {
		await portGroupApi.createPortGroup(config.value.temp);
		config.value.dialogFormVisible = false
		tableRef.value.refresh()
	}
}
const handleUpdate = (row) => {
	config.value.temp = Object.assign({}, row) // copy obj
	config.value.temp.timestamp = new Date(config.value.temp.timestamp)
	config.value.dialogStatus = 'update'
	config.value.dialogFormVisible = true
	dataForm.value.clearValidate()
}
const handleDelete = async (row) => {
	await portGroupApi.deleteGroup(row.id);
	tableRef.value.refresh()
}
</script>
